<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div>
        <el-form :model="screen" label-width="70px">
          <el-form-item label="状态" prop="resource">
            <el-radio-group v-model="screen.resource">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">审核通过</el-radio>
              <el-radio :label="2">待审核</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="频道" prop="region">
            <el-select v-model="screen.region" placeholder="请选择">
              <el-option label="Javascript" value="Javascript"></el-option>
              <el-option label="C++" value="C++"></el-option>
              <el-option label="C#" value="C#"></el-option>
              <el-option label="Java" value="Java"></el-option>
              <el-option label="Vue" value="Vue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-date-picker
              
              format="yyyy-MM-sss"
              value-format="yyyy-MM-sss"
              v-model="screen.value1"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <!-- 单机筛选调用loadArticles方法    重新发送AJAX请求 -->
            <el-button type="primary" @click="loadArticles(1)">筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span>根据筛选共查询 387 条结果:</span>
      </div>

      <div>
        <el-table :data="tableData"     v-loading="loading">
          <el-table-column prop="cover" label="封面">
            <img
              src="../../assets/logo.png"
              alt=""
              width="70px"
              height="70px"
            />
          </el-table-column>

          <el-table-column prop="headline" label="标题"> </el-table-column>

          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === '草稿'" type="warning"
                >草稿</el-tag
              >
              <el-tag v-else-if="scope.row.state === '待审核'">待审核</el-tag>
              <el-tag v-else-if="scope.row.state === '审核通过'" type="success"
                >审核通过</el-tag
              >
              <el-tag v-else-if="scope.row.state === '审核失败'" type="danger"
                >审核失败</el-tag
              >
              <el-tag v-else-if="scope.row.state === '已删除'" type="info"
                >已删除</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="time" label="发布时间"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 编辑文章 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="$router.push(`/publish?id=${12345}`)"
              ></el-button>
              <!-- 123456 模拟动态的文章的ID -->
              <!-- 删除文章 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.$index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
          :disabled="loading"
          :page-size="pageSize"
          style="
          margin-top: 20px; text-align: right;"
          @current-change="onCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { apiArticle } from "@/api/article";
export default {
  name: "myArticle",
  created() {
    this.loadArticles();
  },
  data() {
    return {
      screen: {
        resource: null, //查询文章状态
        value1: "", //时间
        region: "" //频道
      },
      tableData: [
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核通过",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "草稿",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核失败",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核通过",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核通过",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "草稿",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核失败",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "审核通过",
          time: "2021-07-07 11:31:51"
        },
        {
          cover: "",
          headline: "测试文章：人工智能",
          state: "草稿",
          time: "2021-07-07 11:31:51"
        }
      ],
      loading:false,
      totalCount: 0, //总数居条数
      pageSize: 10 //每页显示多少条数据
    };
  },
  methods: {
    //筛选
    onSubmit() {
      console.log("submit!");
    },
    //请求数据
    loadArticles(page = 1) {
      // this.loading=true,
      apiArticle({
        page, //请求的页码数据
        per_page: this.pageSize, //后台渲染每页显示多少条数据
        status: this.screen.resource  //数据的状态 0草稿 1审核通过 2 待审核
      }).then(result => {
        this.totalCount = result.data.data.total_count; //把请求回来的页码数量传给  totalCount
        this.loading= false//关闭loading  
      });
     
    },
    // 删除
    handleDelete(index) {
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            duration: 1000,
            message: "恭喜你, 删除成功！"
          });
          this.tableData.splice(index, 1);
        })
    },
    //编辑
    handleEdit(index) {
      console.log(index);
    },
    //分页
    onCurrentChange(page) {
      //获取页码
      this.loadArticles(page); //并重新调用axios请求 改变请求页码的数据  并重新渲染表格       (每次改变页码都会发送AJAX请求)
      console.log(page);
    }
  }
};
</script>
<style>
.el-table__row {
  height: 100px;
}
</style>
<style lang="less" scoped></style>
